<template>
    <el-container>
        <el-main>
            <el-card class="box-card st-info">
                <el-descriptions title="客户信息">
                    <el-descriptions-item label="客户姓名">{{ statement.customerName }}</el-descriptions-item>
                    <el-descriptions-item label="联系方式">{{ statement.customerPhone }}</el-descriptions-item>
                    <el-descriptions-item label="车牌号码">{{ statement.licensePlate }}</el-descriptions-item>
                    <el-descriptions-item label="汽车类型">
                        {{ statement.carSeries }}
                    </el-descriptions-item>
                    <el-descriptions-item label="服务类型">
                        <dict-tag :options="dict.type.bus_service_type" :value="statement.serviceType" />
                    </el-descriptions-item>
                    <el-descriptions-item label="到店时间">{{ statement.actualArrivalTime }}</el-descriptions-item>
                    <el-descriptions-item label="总消费金额">{{ statement.totalMount }}</el-descriptions-item>
                    <el-descriptions-item label="实付金额">{{ statement.totalMount - statement.discountAmount
                    }}</el-descriptions-item>
                    <el-descriptions-item label="优惠金额">
                        <el-input type="text" size="small" v-model="statement.discountAmount" placeholder="请输入优惠金额"
                            @blur="checkAmount" />
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card class="box-card st-table">
                <el-button type="primary" icon="el-icon-plus" @click="handleSave()">保存</el-button>
                <el-button type="warning" icon="el-icon-refresh" @click="doPrepay">支付</el-button>
                <el-table :data="items">
                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
                    <el-table-column label="名称" align="center" prop="itemName" />
                    <el-table-column label="价格" align="center" prop="itemPrice" />
                    <el-table-column label="数量" align="center" prop="itemQuantity"> </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-plus" @click="addNum(scope.row)"></el-button>
                            <el-button type="danger" icon="el-icon-minus" @click="subNum(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-main>
        <el-aside width="600px">
            <el-card class="box-card st-info">
                <el-form :model="queryParams" ref="queryForm" size="small" label-width="68px">
                    <el-form-item label="服务项名称" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入服务项名称" clearable />
                    </el-form-item>
                    <el-form-item label="是否套餐" prop="carPackage">
                        <el-select v-model="queryParams.carPackage" placeholder="请选择是否套餐" clearable>
                            <el-option v-for="dict in dict.type.bus_service_car_package" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="服务分类" prop="serviceCatalog">
                        <el-select v-model="queryParams.serviceCatalog" placeholder="请选择服务分类" clearable>
                            <el-option v-for="dict in dict.type.bus_service_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="box-card st-table">
                <el-table v-loading="serviceItemLoading" :data="serviceItemList">
                    <el-table-column label="名称" align="center" prop="name" />
                    <el-table-column label="原价" align="center" prop="originalPrice" />
                    <el-table-column label="折扣价" align="center" prop="discountPrice" />
                    <el-table-column label="是否套餐" align="center" prop="carPackage">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.bus_service_car_package" :value="scope.row.carPackage" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-plus" @click="addItem(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="serviceItemTotal > 0" :total="serviceItemTotal" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getServiceItemList" layout="total, prev, pager, next" />
            </el-card>
        </el-aside>

    </el-container>
</template>

<script>
import { listServiceItem } from "@/api/appointment/serviceItem";
import { getStatement, getStatementItems, addStatementItems, prepay } from "@/api/appointment/statement";
export default {
    name: "StatementItem",
    dicts: ['bus_service_car_package', 'bus_service_type'],
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 5,
                name: null,
                carPackage: null,
                serviceCatalog: null,
                saleStatus: 1,
            },
            serviceItemList: [],
            serviceItemTotal: 0,
            serviceItemLoading: false,
            statement: {},
            items: []
        };
    },
    created() {
        this.getServiceItemList();
        const statementId = this.$route.params && this.$route.params.statementId;


        getStatement(statementId).then(response => {
            this.statement = response.data || {};
            if (this.statement.status === 1) {
                this.$tab.closeOpenPage('/appointment/statement/details/' + this.statement.id);
            }
        });
        getStatementItems(statementId).then(response => {
            this.items = response.data || [];
        });

    },
    methods: {
        /** 查询服务项列表 */
        getServiceItemList() {
            this.loading = true;
            listServiceItem(this.queryParams).then(response => {
                this.serviceItemList = response.rows;
                this.serviceItemTotal = response.total;
                this.serviceItemLoading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getServiceItemList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        //  校验金额的合法性
        checkAmount() {
            let { discountAmount, totalMount } = this.statement;
            if (discountAmount > totalMount) {
                this.$modal.alertWarning('折扣金额不能大于总金额');
                this.statement.discountAmount = 0;
            }
        },
        // 添加服务项到明细
        addItem(row) {
            for (let index in this.items) {
                let item = this.items[index];
                if (item.itemId == row.id) {
                    item.itemQuantity += 1;
                    this.calcTotalAmount(item);
                    return;
                }
            }
            let item = {
                itemId: row.id,
                itemName: row.name,
                itemPrice: row.discountPrice,
                itemQuantity: 1,
                statementId: this.statement.id
            };
            this.items.push(item);
            this.calcTotalAmount(item)
        },

        calcTotalAmount(item, type) {
            if (!type) {
                console.log(item);
                this.statement.totalMount += item.itemPrice;
                return;
            }
            this.statement.totalMount -= item.itemPrice;

        },
        addNum(item) {
            item.itemQuantity += 1;
            this.calcTotalAmount(item);
        },
        subNum(item) {
            item.itemQuantity -= 1;
            this.calcTotalAmount(item, "sub");
            if (item.itemQuantity === 0) {
                let index = this.items.indexOf(item);
                this.items.splice(index, 1);
            }
        },
        //保存明细
        handleSave() {
            let data = {
                id: this.statement.id,
                discountAmount: this.statement.discountAmount,
                items: this.items
            };
            addStatementItems(data).then(response =>
                this.$modal.alertSuccess('保存成功'))
        },
        //发起支付请求
        doPrepay() {
            let _this = this;
            this.$modal.confirm('是否确认支付').then(function () {
                return prepay(_this.statement.id);
            }).then(() => {
                _this.$modal.msgSuccess("支付成功");
                setTimeout(() => {_this.$tab.closeOpenPage('/appointment/statement/details/' + _this.statement.id) }, 500);
            }).catch(() => {
            });
        }
    }

}
</script>

<style>
.box-card {
    margin-top: 10px;
}

.el-aside {
    background: none;
    margin-top: 10px;
    padding: 20px, 20px, 20px, 0;
}

.st-info {
    height: 250px;
}

.st-table {
    height: 550px;
}
</style>